<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "zhanyongbian",
    methods: {
        itemRightClick(event,stateDesc,isMainPage,name,type) {
            event.preventDefault(); // 阻止默认的右键菜单弹出
            // 显示自定义右键菜单
            const {clientX, clientY} = event
            let params = {
                clientX,
                clientY,
                type,
                stateDesc,
                isMainPage,
                deviceName:name,
            }

            this.$emit('itemRightClick', params)
        },
    },
    props: {
        translateX: { type: Number, default: 0 },
        translateY: { type: Number, default: 0 },
        rotate: { type: Number, default: 0 },
        scale: { type: Number, default: 1 },
        name: { type: String, default: '' },
        color: { type: String, default: '#fff' },
        jg_name:{
            type:String,
            default:''
        },
        brandInfo:{
            type: String,
            default: ""
        },
        data_id:{
            type: String,
            default: ''
        },
        stateDesc:{
            type: String,
            default: ""
        },
        isMainPage:{
            type: Boolean,
        },
        color_1:{
            type: String,
        }
    },
    computed: {
        computedTransform() {
            return `
                translate(${this.translateX}, ${this.translateY})
                rotate(${this.rotate})
                scale(${this.scale})
            `;
        },
    },
})
</script>

<template>
    <svg>
        <g :transform="computedTransform" style="cursor: pointer">
    <g transform="rotate(90,1460,600)translate(-180, -380)">
        <circle cx="1460" cy="600" r="15" :style="{stroke:color,strokeWidth:2}"/>
        <line x1="1450" y1="600" x2="1460" y2="600" :style="{stroke:color,strokeWidth:2}"/>
        <line x1="1460" y1="600" x2="1468" y2="592" :style="{stroke:color,strokeWidth:2}"/>
        <line x1="1460" y1="600" x2="1468" y2="608" :style="{stroke:color,strokeWidth:2}"/>

    </g>

    <g transform="translate(380, -205)">
        <circle cx="1460" cy="600" r="15" :style="{stroke:color_1,strokeWidth:2}" fill="none"/>
        <line x1="1455" y1="592" x2="1455" y2="608" :style="{stroke:color_1,strokeWidth:2}"/>
        <line x1="1455" y1="608" x2="1468" y2="600" :style="{stroke:color_1,strokeWidth:2}"/>
        <line x1="1455" y1="592" x2="1468" y2="600" :style="{stroke:color_1,strokeWidth:2}"/>
    </g>
        </g>
    </svg>
</template>

<style scoped lang="less">

</style>
